<template>
  <div class="warp" :class="{'no-check': detail.checkStatus !== 1}">
    <div class="quotation-info" :id="pageId" >
      <flexbox class="header" justify="space-between">
        <div style="width: 130px;"></div>
        <flexbox direction="column">
          <h3 style="padding: 5px 0;font-size: 20px">
            {{companyInfo.companyName ? companyInfo.companyName : ''}}
          </h3>
          <h3 style="padding: 5px 0;font-size: 20px">
            {{companyInfo.companyEnName ? companyInfo.companyEnName : ''}}
          </h3>
        </flexbox>
        <div style="width: 130px" ><img src="/static/img/yuzhen_logo.jpg" /></div>
        
      </flexbox>
      <flexbox class="base-info" direction="column">
        <flexbox justify="space-between">
          <span ><label style="font-weight: 600">报价单号：</label>{{ detail.quotationNumber ? detail.quotationNumber : '--'}}</span>
          <span ><label style="font-weight: 600">报价日期：</label>{{ detail.quotationDate ? detail.quotationDate : '--'}}</span>
        </flexbox>
        <flexbox justify="flex-start" direction="column" style="margin-top: 10px">
          <table border="1" width="100%" class="table-info">
            <tbody>
              <tr>
                <td rowspan="3" style="width: 100px;text-align: right">至：</td>
              </tr>
              <tr>
                <td colspan="2" style="font-weight: 600">{{detail.customerName ? detail.customerName : '无客户'}}</td>
              </tr>
              <tr>
                <td colspan="2" >{{ detail.customerInfo ? detail.customerInfo : '--'}}</td>
              </tr>
              <tr>
                <td rowspan="2" style="width: 100px;text-align: right">部署：</td>
              </tr>
              <tr>
                <td >{{ detail.quotationItemName ? detail.quotationItemName : '--'}}</td> 
                <td style="width: 150px">有效期：{{detail.validPeriod ? detail.validPeriod : '--'}}天</td>
              </tr>
              <tr>
                <td rowspan="2" style="width: 100px;text-align: right">摘要：</td>
              </tr>
              <tr>
                <td colspan="2" >{{detail.summary ? detail.summary : '--'}}</td> 
              </tr>
              <tr>
                <td rowspan="2" style="width: 100px;text-align: right">发件人：</td>
              </tr>
              <tr>
                <td colspan="2" >{{detail.senderInfo ? detail.senderInfo : '--'}}</td> 
              </tr>
            </tbody>
          </table>
        </flexbox>
        <flexbox justify="flex-start" direction="column">
          <flexbox direction="column" v-for="(item,index) in list" :key="index" >
            <flexbox class="target-node-item">
              <span style="font-weight: bold;margin: 10px 0;font-size: 14px">第{{index + 1}}部分：{{item.itemOption}}</span>
            </flexbox>
            <flexbox class="target-node-item">
              <table border="1" width="100%" class="table-info" >
                <thead >
                  <th style="text-align: center" width="50">序号</th>
                  <th style="text-align: center" v-for="(head,headIndex) in headList" :key="headIndex" :style="{'width': head.width ? head.width + 'px' : ''}">
                    {{head.name}}
                  </th>
                </thead>
                <tbody>
                  <tr v-for="(product,productIndex) in item.productList" :key="productIndex">
                    <td style="text-align: center">{{productIndex + 1}}</td>
                    <td :style="{'text-align': getStyle(head)}" v-for="(head,headIndex) in headList" :key="headIndex">
                      {{product[head.fieldName]}} {{head.fieldName == 'totalPrice' ? '元' : ''}}
                    </td>
                  </tr>
                  <tr>
                    <td :colspan="headList.length + 1" style="text-align: left">小计：{{item.subtotal}} 元</td>
                  </tr>
                </tbody>
              </table>
            </flexbox>
          </flexbox>
        </flexbox>
        <flexbox direction="column" class="target-node-item">
          <flexbox justify="space-between" style="padding: 10px 0;font-weight: bold;position: relative">
            <span>增值税率：{{detail.rate}} %</span> 
            <span>总计：{{detail.finalSalesPriceTax}} 元</span> 
          </flexbox> 
          <flexbox justify="flex-start" align="flex-start" style="margin-bottom: 20px;">
            <label style="width: 50px">说明：</label>
            <pre style="font-weight: 600" v-html="detail.remark"></pre>
          </flexbox>
          <flexbox justify="flex-end" style="position: relative;padding-top: 30px" v-if="detail.checkStatus == 1">
              <flexbox direction="column" :style="{'width': companyInfo.companyName ? companyInfo.companyName.length * 20 + 'px' : 400 + 'px'}">
                <flexbox class="yuzhen-seal" direction="column" align="center" justify="center">
                  <flexbox justify="center" style="margin-bottom: 5px"><span>报</span><span>价</span><span>审</span><span>核</span></flexbox>
                  <flexbox justify="center"><span>通</span><span>过</span></flexbox>
                </flexbox>
                <h3 style="padding: 5px 0;font-size: 20px">
                  {{companyInfo.companyName}}
                </h3>
              </flexbox>
          </flexbox>
        </flexbox>
      </flexbox>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  queryBranchOfficeInfo
} from '@/api/systemManagement/SystemCustomer'
export default {
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    action: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    detail: {
      handler(val){
        // 触发分公司信息
        this.getBranchOfficeInfo()
      },
      deep: true
    }
  },
  data() {
    return {
      headList: [],
      pageId: 'quotationInfo',
      companyInfo: {},
      filePath: ''
    }
  },
  computed: {
    ...mapGetters(['crm','psi']),
  },
  mounted(){
    this.headList = [
      {name: '产品名称', fieldName: 'productName',width: '150'},
      {name: '型号', fieldName: 'productModel',width: '130'},
      {name: '单价', fieldName: 'productPrice',width: '80'},
      {name: '单位', fieldName: 'unit',width: 0},
      {name: '数量', fieldName: 'productNumber',width: 0},
      {name: '总价', fieldName: 'totalPrice',width: 0},
      {name: '备注', fieldName: 'remark'}
    ]
      
  },

  methods: {
    getBranchOfficeInfo(){
      let params = {
        companyId: this.detail.invoiceInfo
      }
      queryBranchOfficeInfo(params).then(res => {
        this.companyInfo = res.data;
        if(process.env.NODE_ENV == 'development'){
          this.filePath = 'http://localhost:8030'+ res.data.officialSeal.filePath
        }else{
          this.filePath = res.data.officialSeal.filePath
        }
        
      }).catch(res => {

      })
    },

    // 数据排布
    getStyle(item){
      if(item.fieldName == 'productNumber'){
        return 'center'
      }
      if(item.fieldName.indexOf('Price') != -1){
        return 'right'
      }
    }
  }


}
</script>

<style lang="scss" scoped>
.warp{
  width: 100%;
  min-width: 840px;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
}
.no-check{
  background: url('/static/img/crm/quotation_no_check.png');
}
.yuzhen-seal{
  // background: url('/static/img/crm/pass.png');
  height: 60px;
  width: 200px;
  box-sizing: border-box;
  border: 2px solid red;
  span{
    width: 30px;
    font-weight: 600;
    color: red;
    text-align: center;
  }
  // opacity: 0.9;
  // background-repeat:  no-repeat;
  // background-size: 100% 100%;
}

.warning-show{
  background-color: orange;
}

.quotation-info{
  min-width: 840px;
  width: 840px;
  // padding: 20px;
  height: 100%;
  min-height: 1086px;
  box-sizing: border-box;
  border-collapse: collapse;
  position: relative;
  .base-info{
    margin-top: 20px;
    font-size: 16px;
  }
  .table-info{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    tr {
      width: 100%;
    }
    th {
      border: 1px solid;
      font-size: 14px;
      line-height: 1.2;
      text-align: left;
      padding: 8px;
      font-weight: 600;
    }
    td {
      border: 1px solid;
      padding: 5px;
      line-height: 1.2;
    }
  }
}

</style>